<template>
	<div class="productlist_page">
		<ul>
			<li class="productlist_item clear_float" v-for="(item,index) in list" :key="index" >
				<router-link :to="{path:'productdetail',query:{name:item.name,price:item.price}}" class="clear_float">
					<img src="../../assets/images/xinwang.jpg" height="54" width="54">
					<div class="product_disr">
						<h4>商品名称:{{item.name}}</h4>
						<p>单价:500g/{{item.price}}元</p>
					</div>
				</router-link>
			</li>
		</ul>
		<div>{path:'',query:{} 或者 name:'',params{}}</div>
		<ul>
			<li class="productlist_item clear_float" v-for="(item,index) in list" :key="index" >
				<router-link :to="{name:'productdetail',params:{name:item.name,price:item.price}}" class="clear_float">
					<img src="../../assets/images/xinwang.jpg" height="54" width="54">
					<div class="product_disr">
						<h4>商品名称:{{item.name}}</h4>
						<p>单价:500g/{{item.price}}元</p>
					</div>
				</router-link>
			</li>
		</ul>
	</div>
	<!-- query 需要path来引入,通过url拼接参数的形式,暴露在url中 -->
	<!--  params 需要name来引入,传递的参数的形式类似于ajax的post,会暴露在url中 -->
</template>


<script>
	export default{
		data(){
			return{
				list:[{name:'hello world',price:'150'},
					  {name:'小猪佩奇',price:'189'},
					  {name:'小猪乔治',price:'169'},
					  {name:'厄瓜多尔白虾',price:'199'},
					  {name:'阿根廷红虾',price:'289'},
					  {name:'智利三文鱼',price:'889'},
					  {name:'阿拉斯加帝王蟹',price:'999'},
					  {name:'大连鲍鱼',price:'188'},
					  {name:'内蒙古纯羊肉',price:'49'},
					  {name:'深海蓝鳍金枪鱼',price:'1999'},
					  {name:'长江刀鱼',price:'699'},
					  {name:'松花江大马哈',price:'89'},
					  {name:'白洋淀小龙虾',price:'48'},
					]
			}
		},
		methods:{

		},
		mounted(){

		}
	}
	//路由传值
	//有两种写法 
	//1  {path:'路由',query:{val1:value1,val2:value2}} 这种写法参数会拼在url后面 暴露在地址栏中 就像ajax 的get请求
 	//2  {name:'路由',params:{val1:value1,val2:value2}}	这种写法 参数不会暴露在url中, 就像ajax 的 post请求

 	//注意 path-query  name-params 一一对应
 	// 用来接收路由传来值 组件 通过 this.$route.query  和 this.$route.params来接收 写法必须也得一一对应

</script>


<style lang="scss" scoped>
.clear_float::after{display:block;clear:both;content:"";visibility:hidden;height:0;clear: both;}
.productlist_page{height:100%;overflow:auto;padding-bottom: 10px;}
.productlist_item{padding:5px;border-bottom:1px solid #f4f4f4;}
.productlist_item a{display: block;padding:3px;color:#000;}
.productlist_item a img{
	float: left;border:none;
}
.product_disr{float: left;margin-left: 10px;}
.product_disr h4{font-size: 16px; font-weight: normal;height:30px;line-height:30px;width:100%;}
.product_disr p{
	font-size:14px; color:#999;height:50%;text-align:left;
}
</style>